<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="碧桂园大数据平台" name="keywords" />
    <meta content="碧桂园大数据平台" name="description" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/elementUI/index.css" />
    <link rel="stylesheet" type="text/css" href="css/elementUI/plugins.css" />
</head>
<body>
    <div class="cost-page cost-add-page" v-cloak>
        <!--步骤条-->
        <div class="cost-header">
            <ul class="step2">
                <li class="over">目标成本导入校验</li>
                <li class="active">关联产品</li>
                <li>填写政府要求</li>
                <li>评估结果</li>
            </ul>
        </div>

        <!--表单-->
        <div class="cost-main">
            <div class="b_1">
                <div class="cost-main-title fs14 fw c_333">
                    <span>其他项目信息</span>
                    <span class="c_999 pl30">以下带" <span class="c_red">*</span> "号均为必填项，其余选填</span>
                </div>
                <div class="bg_white p20 bt_1">
                    <el-form :model="programForm" :rules="rules" ref="programForm"
                             size="small" :inline="true" label-width="200px">
                        <el-form-item label="当前项目类别" required prop="category">
                            <el-radio-group v-model="programForm.category">
                                <el-radio
                                        v-for="item in categoryList"
                                        :key="item.value"
                                        :label="item.value">
                                    {{item.label}}
                                </el-radio>
                            </el-radio-group>
                            <el-radio v-model="programForm.category" label="04" class="ml10">好房子<span class="fs12 c_999">（选填）</span></el-radio>
                        </el-form-item>
                        <el-form-item label="抗震烈度" required prop="intensity">
                            <el-radio-group v-model="programForm.intensity">
                                <el-radio
                                        v-for="item in intensityList"
                                        :key="item.value"
                                        :label="item.value">
                                    {{item.label}}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="相似项目" prop="project">
                            <el-select v-model="programForm.project" clearable placeholder="" >
                                <el-option
                                        v-for="item in projectList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    <span class="fl pr10">{{ item.label }}</span>
                                    <span class="fr c_999">{{ item.area }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="b_1 mt20">
                <div class="cost-main-title fs14 fw c_333">
                    <span>关联标准产品</span>
                </div>
                <div class="bg_white p20 bt_1">
                    <div class="c_red mb20">请根据实际，完整建立下方各产品的关联关系，否则将影响后续评估分析。</div>
                    <el-form :model="productForm" :rules="rules" ref="productForm" size="small" label-position="right" label-width="125px">
                        <el-form-item label="关联标准产品选择" prop="standard">
                            <el-select v-model="productForm.standard" clearable placeholder=""
                                       @change="getProductList()">
                                <el-option
                                        v-for="item in standardList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item">
                                    {{ item.label }}
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="方案版产品选择" prop="program">
                            <el-checkbox-group v-model="productForm.program">
                                <el-checkbox
                                        v-for="item in programList"
                                        :key="item.value"
                                        :label="item">
                                    {{item.label}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="投资版产品选择" prop="investment">
                            <el-checkbox-group v-model="productForm.investment">
                                <el-checkbox
                                        v-for="item in investmentList"
                                        :key="item.value"
                                        :label="item">
                                    {{item.label}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="相似项目产品选择" prop="product">
                            <el-checkbox-group v-model="productForm.product">
                                <el-checkbox
                                        v-for="item in productList"
                                        :key="item.value"
                                        :label="item">
                                    {{item.label}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-form>
                    <div class="pb20 tc">
                        <el-button type="primary" size="small" :disabled="(productForm.program.length || productForm.investment.length || productForm.product.length?false:true)" @click="submitForm()">生成关联</el-button>
                    </div>
                    <div class="pt20 bt_1" v-show="resultShow">
                        <table class="cost-table detail">
                            <colgroup><col width="125px"></colgroup>
                            <tbody>
                            <tr>
                                <td class="head">关联标准产品选择</td>
                                <td v-for="(item,index) in resultTableList" :key="index"><i class="el-icon-error c_red" @click="cancelCells(index)"></i>{{item.standard.label}}</td>
                            </tr>
                            <tr class="program-tr">
                                <td class="head">方案版产品选择</td>
                                <td v-for="(item,index) in resultTableList" :key="index"><div><a class="c_blue" @click="addProduct('program',item.standard.label)">增加产品</a></div></td>
                            </tr>
                            <tr class="investment-tr">
                                <td class="head">投资版产品选择</td>
                                <td v-for="(item,index) in resultTableList" :key="index"><div><a class="c_blue" @click="addProduct('investment',item.standard.label)">增加产品</a></div></td>
                            </tr>
                            <tr class="product-tr">
                                <td class="head">相似项目产品选择</td>
                                <td v-for="(item,index) in resultTableList" :key="index"><div><a class="c_blue" @click="addProduct('product',item.standard.label)">增加产品</a></div></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!--底部按钮-->
        <div class="cost-footer">
            <el-button @click="goToBeforeStep()">上一步</el-button>
            <el-button type="primary" @click="saveToDraft()">存草稿</el-button>
            <el-button type="primary" @click="goToNextStep()">下一步</el-button>
            <el-button>退出</el-button>
        </div>

        <!--草稿箱-->
        <div class="cost-draft" @click="draftDialogVisible = true">
            <img src="./images/cost/icon-draft.png"/>
            <div class="pt10">草稿箱</div>
        </div>
        <draft-plugins v-if="draftDialogVisible"></draft-plugins>
    </div>
</body>
<script src="js/common/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/vue/vue-dev.js" type="text/javascript"></script>
<script src="js/elementUI/index.js" type="text/javascript"></script>
<script src="js/common/main.js" type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '.cost-add-page',
        data() {
            return {
                categoryList: [
                    {value: '01', label: '一二线城市'},
                    {value: '02', label: '三四线城市'},
                    {value: '03', label: '镇一级'},
                ],
                intensityList: [
                    {value: '01', label: '六度'},
                    {value: '02', label: '七度'},
                    {value: '03', label: '八度'},
                ],
                projectList: [
                    {value: '01', label: '十里银滩碧桂园八期', area: '广清区域/广州市'},
                    {value: '02', label: '十里银滩碧桂园九期', area: '广清区域/广州市'},
                ],
                standardList: [
                    {value: '01', label: '双拼洋房'},
                    {value: '02', label: '联体别墅'},
                ],
                programList: [],
                investmentList: [],
                productList: [],
                programForm: {
                    category: '',
                    intensity: '',
                    project: '',
                },
                productForm: {
                    standard: {},
                    program: [],
                    investment: [],
                    product: [],
                },
                rules: {
                    category: [
                        { required: true, message: '请选择当前项目类别', trigger: 'change' }
                    ],
                    intensity: [
                        { required: true, message: '请选择抗震烈度', trigger: 'change' }
                    ],
                },
                btnDisabled: true,
                draftDialogVisible: false,
                resultShow: false,
                resultTableList: [],
            }
        },
        methods: {
            submitForm() {
                var res = false;
                this.$refs['programForm'].validate((valid) => {
                    res = valid;
                });
                if(res){
                    Object.assign(this.programForm, this.productForm);
                    this.resultTableList = [
                        {
                            standard: {value: '01', label: '双拼洋房'},
                            program: [{value: '01', label: '产品1-1'},{value: '01', label: '产品1-2'},],
                            investment: [{value: '01', label: '产品2-1'},],
                            product: [{value: '01', label: '产品3-1'},],
                        },
                        {
                            standard: {value: '02', label: '联体别墅'},
                            program: [{value: '01', label: '产品B1-1'},],
                            investment: [{value: '01', label: '产品B2-1'},{value: '01', label: '产品B2-2'},],
                            product: [],
                        }
                    ];
                    this.showResultTable();
                }
            },
            getProductList(){
                this.programList = [
                    {value: '01', label: '产品1'},
                    {value: '02', label: '产品1'},
                    {value: '03', label: '产品1'},
                ];
                this.investmentList = [
                    {value: '01', label: '产品11'},
                    {value: '02', label: '产品11'},
                    {value: '03', label: '产品11'},
                ];
                this.productList = [
                    {value: '01', label: '产品12'},
                    {value: '02', label: '产品12'},
                    {value: '03', label: '产品12'},
                ];
            },
            addProduct(type, standard){
                this.productForm.standard = standard;
                this.getProductList();
            },
            showResultTable(){
                this.resultShow = true;
                var resList = this.resultTableList;
                var tagTable = document.getElementsByClassName('cost-table')[0];
                // 找出方案版产品选择、投资版产品选择、相似项目产品选择 的最多产品的数量
                var productMaxSize = [0,0,0];
                for(var i=0;i<resList.length;i++){
                    var porgramSize = resList[i].program ? resList[i].program.length : 0;
                    if(porgramSize > productMaxSize[0]) productMaxSize[0] = porgramSize;
                    var investmentSize = resList[i].investment ? resList[i].investment.length : 0;
                    if(investmentSize > productMaxSize[1]) productMaxSize[1] = investmentSize;
                    var productSize = resList[i].product ? resList[i].product.length : 0;
                    if(productSize > productMaxSize[2]) productMaxSize[2] = productSize;
                }
                // 遍历插入方案版产品选择、投资版产品选择、相似项目产品选择的产品
                // 方案版产品选择
                $('.cost-table').find('.program-list-tr').remove();
                for(var j=productMaxSize[0]-1; j>=0; j--){
                    var row = '<tr class="program-list-tr">';
                    row += '<td></td>';// 第一列是空的
                    for(var i=0;i<resList.length;i++) {
                        if (resList[i].program && j < resList[i].program.length) {// 显示值
                            row += '<td><i class="el-icon-error c_red" onClick="app.cancelCell('+i+','+j+',\'program\''+')"></i>' + resList[i].program[j].label + '</td>';
                        }
                        else {// 显示空
                            row += '<td></td>';
                        }
                    }
                    row += '</tr>';
                    // 插入行
                    $('.program-tr').after(row)
                }
                // 投资版产品选择
                $('.cost-table').find('.investment-list-tr').remove();
                for(var j=productMaxSize[1]-1; j>=0; j--){
                    var row = '<tr class="investment-list-tr">';
                    row += '<td></td>';// 第一列是空的
                    for(var i=0;i<resList.length;i++) {
                        if (resList[i].investment && j < resList[i].investment.length) {// 显示值
                            row += '<td><i class="el-icon-error c_red" onClick="app.cancelCell('+i+','+j+',\'investment\''+')"></i>' + resList[i].investment[j].label + '</td>';
                        }
                        else {// 显示空
                            row += '<td></td>';
                        }
                    }
                    row += '</tr>';
                    // 插入行
                    $('.investment-tr').after(row)
                }
                // 相似项目产品选择
                $('.cost-table').find('.product-list-tr').remove();
                for(var j=productMaxSize[2]-1; j>=0; j--){
                    var row = '<tr class="product-list-tr">';
                    row += '<td></td>';// 第一列是空的
                    for(var i=0;i<resList.length;i++) {
                        if (resList[i].product && j < resList[i].product.length) {// 显示值
                            row += '<td><i class="el-icon-error c_red" onClick="app.cancelCell('+i+','+j+',\'product\''+')"></i>' + resList[i].product[j].label + '</td>';
                        }
                        else {// 显示空
                            row += '<td></td>';
                        }
                    }
                    row += '</tr>';
                    // 插入行
                    $('.product-tr').after(row)
                }
            },
            cancelCell(index,index2,type){
                if(type == 'program'){
                    this.resultTableList[index].program.splice(index2,1);
                }
                if(type == 'investment'){
                    this.resultTableList[index].investment.splice(index2,1);
                }
                if(type == 'product'){
                    this.resultTableList[index].product.splice(index2,1);
                }
                this.showResultTable();
            },
            cancelCells(index) {
                this.resultTableList.splice(index,1);
                this.showResultTable();
            },
            goToBeforeStep(){
                window.location.href = 'A01新建评估-步骤1（集团&管理员）.html';
            },
            saveToDraft () {
                this.$message({
                    duration: 0,
                    message: '保存成功'
                });
            },
            goToNextStep () {
                window.location.href = 'A03新建评估-步骤3（所有人员）.html';
            },
        },
        components: {
            'draft-plugins': draftPlugins
        }
    });
</script>
</html>